<template>
  <div class="about">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form :inline="true">
        <el-form-item>
          <div>
            <el-card class="box-card">
              <el-row>
                <el-col :span="5"
                  ><h3>代办事项</h3>
                  <i
                    class="el-icon-s-management"
                    style="font-size: 40px; color: #409eff"
                  ></i
                ></el-col>
                <el-col :span="18">
                  <div
                    v-for="(item, index) in waitdata"
                    :key="index"
                    class="text item"
                  >
                    {{
                      "代办事项： " +
                      item.departmentName +
                      "-" +
                      item.jobNumber +
                      "-" +
                      item.username +
                      "-" +
                      item.processName
                    }}
                  </div>
                  <div>{{ "代办事项：" + "2022年3月20号晚上8点有个会" }}</div>
                  <div>{{ "代办事项：" + "2022年3月20号晚上8点聚餐" }}</div>
                </el-col>
              </el-row>
              <!-- <router-link type="info" :to="{ path: '/abeyance' }">查看详情</router-link> -->
            </el-card>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="one">
            <h3>通讯录</h3>
            <i
              class="el-icon-s-custom"
              style="font-size: 40px; color: #e6a23c"
            ></i>
            <router-link type="info" :to="{ path: '/number' }"
              >查看详情</router-link
            >
          </div></el-form-item
        >
      </el-form>
      <div style="display: flex">
        <div class="test2" style="width: 300px; height: 300px">
          <div
            id="myChart2"
            style="width: 100%; height: 270px; float: left"
          ></div>
        </div>
        <div
          class="test3"
          style="width: 300px; height: 300px; margin-left: 100px"
        >
          <div
            id="myChart3"
            style="width: 100%; height: 270px; float: right"
          ></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      one: {
        jobNumber: "",
        processKey: "",
        processState: "",
        processName: "",
        departmentName: "",
        procCurrNodeUserGroup: "",
        currentPage: 1,
        pageSize: 4,
      },
      myChart2: "",
      myChart3: "",
      waitdata: [],
    };
  },
  created() {
    this.get();
  },
  mounted: function () {
    this.drawLine1();
    this.drawLine2();
  },
  methods: {
    //周考勤统计表
    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart2 = this.$echarts.init(document.getElementById("myChart2"));
      // 绘制图表
      this.myChart2.setOption({
        title: {
          text: "考勤周统计", // 主标题
          subtext: "", // 副标题
          x: "left", // x轴方向对齐方式
        },
        //提示框取默认值，即鼠标移动到柱状图会显示内容
        tooltip: {
          trigger: "axis", // axis   item   none三个值  触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据
        },
        xAxis: {
          type: "category", // 还有其他的type，可以去官网喵两眼哦
          data: ["星期一", "星期二", "星期三", "星期四", "星期五"], // x轴数据
          name: "", // x轴名称
        },
        yAxis: {
          type: "value",
          name: "出勤人数", // y轴名称
          // y轴名称样式
          // nameTextStyle: {
          //   fontWeight: 600,
          //   fontSize: 18
          // }
        },
        legend: {
          orient: "vertical",
          x: "right",
          y: "top",
          data: ["出勤人数"],
        },
        series: [
          {
            name: "出勤人数",
            data: [50, 48, 52, 45, 53],
            type: "bar", //type=line ——-折线图   type=bar ——-柱状图  type=pie ——-饼图
          },
          {
            name: "未出勤人数",
            data: [10, 48, 12, 45, 13],
            type: "bar", //type=line ——-折线图   type=bar ——-柱状图  type=pie ——-饼图
          },
        ],
      });
    },
    //月考勤统计表
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart3 = this.$echarts.init(document.getElementById("myChart3"));
      // 绘制图表
      this.myChart3.setOption({
        title: {
          text: "考勤月统计", // 主标题
          subtext: "", // 副标题
          x: "left", // x轴方向对齐方式
        },
        tooltip: {
          trigger: "axis", // axis   item   none三个值
        },
        xAxis: {
          type: "category", // 还有其他的type，可以去官网喵两眼哦
          data: ["第一周", "第二周", "第三周", "第四周"], // x轴数据
          name: "", // x轴名称
        },
        yAxis: {
          type: "value",
          name: "出勤人数", // y轴名称
        },
        legend: {
          orient: "vertical",
          x: "right",
          y: "top",
          data: ["出勤人数"],
        },
        series: [
          {
            name: "出勤人数",
            data: [50, 48, 52, 45],
            type: "bar",
          },
          {
            name: "未出勤人数",
            data: [30, 48, 32, 45],
            type: "bar",
          },
        ],
      });
    },
    get() {
      let role = JSON.parse(sessionStorage.getItem("rolee"));
      console.log(role.role);
      const arr = role.role.split("_");
      console.log(arr[1]);
      this.one.procCurrNodeUserGroup = arr[1];
      this.$http.post("audit/instanceQuery", this.one).then((res) => {
        console.log(res);
        this.waitdata = res.data.rows;

        // if (res.data.flag !== true) {
        //   return this.$message.error("获取我的审批信息失败!");
        // }
      });
    },
  },
};
</script>

<style scoped>
.el-form {
  margin-bottom: 50px;
}
.one {
  margin-left: 200px;
}
.box-card {
  width: 550px;
}
</style>
